var ModuleManager = (function () {
  // 用于记录模块，作用类似于Map
  var _modules = {};

  // 根据模块名称，获取对应的模块（服务类实例）
  function getModule(name) {
    return _modules[name] || {};
  }

  // 定义一个模块
  function define(name, deps, fn) {
    if (typeof name !== 'string') {
      throw new TypeError('name should be string.');
    }
    if (_modules[name]) {
      throw new Error('This module has been already declared.');
    }
    if (!deps instanceof Array) {
      throw new TypeError('deps should be Array<String>.');
    }
    if (!fn instanceof Function) {
      throw new TypeError('fn should be function.');
    }

    // 导出它所依赖的模块
    var depsModules = [];
    for (var i = 0, len = deps.length; i < len; i++) {
      depsModules.push(getModule(deps[i]));
    }

    // 注入依赖，并得到返回的模块，写入Map
    _modules[name] = fn.apply(null, depsModules);
    return true;
  }

  // 获取一系列的依赖，从而使用它们进行操作
  function require(deps, fn) {
    if (!deps instanceof Array) {
      throw new TypeError('deps should be Array<String>.');
    }
    if (!fn instanceof Function) {
      throw new TypeError('fn should be function.');
    }

    // 导出它所依赖的模块
    var depsModules = [];
    for (var i = 0, len = deps.length; i < len; i++) {
      depsModules.push(getModule(deps[i]));
    }

    // 执行回调
    fn.apply(null, depsModules);
  }

  // 暴露define和require两个方法
  return {
    define: define,
    require: require,
  };
})();

@Injectable()
export class SomeService {
  constructor () {}
  
  dosth () {
    // ...
  }
}

@Component({
  selector: '...',
  template: ``,
  // 需要注意，这是一个数组，可以导入数个依赖
  providers: [SomeService],
})

// 在Module层导入也是可以的
@NgModule({
  imports: [],
  exports: [],
  declarations: [],
  providers: [SomeService],
})

class TemplateComponent {
  constructor(private _someService: SomeService) {
    this._someService.dosth();
  }
}

// 其实转译为
class TemplateComponent {
  // 在构造的时候传入对应的依赖实例
  constructor(SomeService) {
    this.SomeService = SomeService;
    this._someService = this.SomeService;
  }
}

// 声明一系列的接口
export interface Warrior {
    fight(): string;
    sneak(): string;
}

export interface Weapon {
    hit(): string;
}

export interface ThrowableWeapon {
    throw(): string;
}

// 将其打包后导出为一个模块
const TYPES = {
    Warrior: Symbol.for("Warrior"),
    Weapon: Symbol.for("Weapon"),
    ThrowableWeapon: Symbol.for("ThrowableWeapon")
};

export { TYPES };

// 针对先前的声明，创建具体的实现类
@injectable()
class Katana implements Weapon {
    public hit() {
        return "cut!";
    }
}

@injectable()
class Shuriken implements ThrowableWeapon {
    public throw() {
        return "hit!";
    }
}

@injectable()
class Ninja implements Warrior {

    private _katana: Weapon;
    private _shuriken: ThrowableWeapon;

    public constructor(
	    @inject(TYPES.Weapon) katana: Weapon,
	    @inject(TYPES.ThrowableWeapon) shuriken: ThrowableWeapon
    ) {
        this._katana = katana;
        this._shuriken = shuriken;
    }

    public fight() { return this._katana.hit(); }
    public sneak() { return this._shuriken.throw(); }

}

export { Ninja, Katana, Shuriken };

// 也可以在服务类中注入其他的服务类
@injectable()
class Ninja implements Warrior {
    @inject(TYPES.Weapon) private _katana: Weapon;
    @inject(TYPES.ThrowableWeapon) private _shuriken: ThrowableWeapon;
    public fight() { return this._katana.hit(); }
    public sneak() { return this._shuriken.throw(); }
}

import { Container } from "inversify";
import { TYPES } from "./types";
import { Warrior, Weapon, ThrowableWeapon } from "./interfaces";
import { Ninja, Katana, Shuriken } from "./entities";

// 在容器中，将依赖进行绑定
const myContainer = new Container();
myContainer.bind<Warrior>(TYPES.Warrior).to(Ninja);
myContainer.bind<Weapon>(TYPES.Weapon).to(Katana);
myContainer.bind<ThrowableWeapon>(TYPES.ThrowableWeapon).to(Shuriken);

export { myContainer };

import { myContainer } from "./inversify.config";
import { TYPES } from "./types";
import { Warrior } from "./interfaces";

// 使用get方法来获取依赖，传入的参数为其键名（Symbol类型）
const ninja = myContainer.get<Warrior>(TYPES.Warrior);

/**
 * 在需要注入的模块类上添加该修饰器，可以生成一个单例，纳入ModuleManager的管理
 * @returns {(target: any) => void}
 * @constructor
 */
const Injectable = (): ClassDecorator => (target: Function): any => {
  ModuleManager.addModule(target);
};

// 模块注册示例
@Injectable()
export class SomeModule {}

/**
 * 改造被注入的类中，某个属性的描述器，从而使其承载被注入的依赖
 * @param module
 * @returns {PropertyDecorator}
 * @constructor
 */
const Provided = (module: any): PropertyDecorator => (target: Object, name: string | symbol): any => {
  return {
    configurable: true,
    enumerable: false,
    // 不允许直接对其进行set，应当通过模块暴露的public方法去操作
    set: () => {},
    // getter设置为返回这个module的单例
    get: () => {
      return ModuleManager.getModule(module);
    },
  };
};

// 依赖注入示例
export class Example {
  @Provided(SomeModule) private _someModule: SomeModule;
}

;
(function () {
  'use strict';

  // 初始图片大小
   function initSize() {
    var item,
      itemInfo;
    for (var i = 0; i < pictures.length; i++) {
      item = pictures[i];
      itemInfo = item.dataset;
      item.style.height = itemInfo.height + 'px';
      item.style.width = itemInfo.width + 'px';
    }
  }
  // 修改初始大小
  window.addEventListener('load', initSize, false);

  /**
  * 检查图片是否进入视窗
  */
  function inView() {
    if (pictures.length) {
      requestAnimationFrame(function () {
        var windowTop = window.pageYOffset,
          windowBottom = windowTop + window.innerHeight;
        var imageInfo,
          pictureTop,
          pictureBottom;

        // 检查每幅图片
        for (var i = 0; i < pictures.length; i++) {
          imageInfo = pictures[i].getBoundingClientRect();
          pictureTop = windowTop + imageInfo.top;
          pictureBottom = pictureTop + imageInfo.height;

          // 如果进入视窗，就执行加载
          if (windowTop < pictureBottom && windowBottom > pictureTop) {
            loadFullImage(pictures[i]);
          }
        }

        // 更新需要恢复的照片（放止infinite load加载更多）
        pictures = [].slice.call(document.querySelectorAll('.progressive .preview'));

      });
    }
  }

  /**
   * 恢复指定图片
   * @param {Element} item 
   */
  function loadFullImage(item) {
    var href = item && (item.getAttribute('data-actual') || item.href);
    if (!href) return;

    // 预加载，放入缓存
    var img = new Image();
    img.src = href;
    img.onload = function () {
      requestAnimationFrame(function () {
        // 从缓存中去读取
        item.src = href;
        // 切换class，恢复视觉效果
        item.classList.remove('preview');
        item.classList.add('reveal');
      });
    }
  }

  /**
   * 每0.5s执行一次
   */
  function throttledLoad() {
    throttler = throttler || setTimeout(function () {
      throttler = null;
      inView();
    }, 500)
  }


  var pictures = [].slice.call(document.querySelectorAll('.progressive .preview')),
    throttler = null;

  // 初始检查
  inView();

  window.addEventListener('scroll', throttledLoad, false);
  window.addEventListener('resize', throttledLoad, false);

})();